<template>
    <iframe v-if="isShow" :src="src"
            class="iframe"
            ref="iframe"></iframe>
</template>

<script>
import { mapGetters } from "vuex";
import NProgress from "nprogress"; // progress bar
import "nprogress/nprogress.css"; // progress bar style
export default {
  name: "AvueIframe",
  data () {
    return {
      isShow:true
    }
  },
  created () {
    NProgress.configure({ showSpinner: false })
  },
  mounted () {
    this.load()
    this.resize()
  },
  watch: {
    $route: function () {
      this.load()
    }
  },
  computed: {
    ...mapGetters(["screen",'token']),
    src () {
      let url = this.$route.query.src.replace("$", "&")
      if(url.indexOf('lrtoken') != -1){
        url = url.replace("lrtoken", "token")
        url += this.token
      }
      return url
    }
  },
  methods: {
    // 显示等待框
    show () {
      NProgress.start();
    },
    // 隐藏等待狂
    hide () {
      NProgress.done();
    },
    // 加载浏览器窗口变化自适应
    resize () {
      window.onresize = () => {
        this.iframeInit()
      };
    },
    // 加载组件
    load () {
      this.isShow = false
      this.show()
      this.$nextTick(()=>{
        this.isShow = true
        //超时3s自动隐藏等待狂，加强用户体验
        let time = 3
        const timeFunc = setInterval(() => {
          time--;
          if (time == 0) {
            this.hide();
            clearInterval(timeFunc)
          }
        }, 1000)
        this.iframeInit()
      })

     
    },
    //iframe窗口初始化
    iframeInit () {
      const iframe = this.$refs.iframe
      if (!iframe) return
      if (iframe.attachEvent) {
        iframe.attachEvent("onload", () => {
          this.hide()
        })
      } else {
        iframe.onload = () => {
          this.hide()
        }
      }
    }
  }
};
</script>

<style lang="scss">
.iframe {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  border: 0;
  overflow: hidden;
  box-sizing: border-box;
}
</style>